<template>
  <div class="test1">
    <div class="div1"></div>
    <Drag :type="'vertical'" :limitDom="limitDom" :bindingDom="bindingDom" />
    <div class="div2">
      <div class="div2_1"></div>
      <Drag :type="'vertical'" :limitDom="limitDom" :bindingDom="bindingDom1" :background="'red'"/>
      <div class="div2_2"></div>
    </div>
  </div>
</template>

<script>
import Drag from "../components/drag.vue";

export default {
  name: "Test1",
  components: {
    Drag,
  },
  data() {
    return {
      bindingDom: [],
      limitDom: null,
      bindingDom1: [],
    };
  },
  mounted() {
    this.bindingDom = [
      document.querySelector(".div1"),
      document.querySelector(".div2"),
    ];
    this.bindingDom1 = [
      document.querySelector(".div2_1"),
      document.querySelector(".div2_2"),
    ];
    this.limitDom = document.querySelector(".test1");
  },
};
</script>

<style scoped>
.test1 {
  height: 100%;
  display: flex;
}
.div1 {
  width: 200px;
  height: 100%;
  background: #353535;
  flex-grow: 0;
}
.div2 {
  height: 100%;
  background: #fff;
  flex-grow: 1;
  display: flex;
}
.div2_1 {
  height: 100%;
  width: 100px;
  flex-grow: 0;
  background: #534481;
}
.div2_2 {
  height: 100%;
  flex-grow: 1;
  background: #8b8b8b;
}
</style>
